<template>
    <a-avatar :imageUrl="url" :style="{ background: sex === 1 ? '#7bc0fc' : '#e972ad' }" :size="size">
		{{ computedPinYin(name) }}
        <slot></slot>
    </a-avatar>
</template>
<script lang="ts" setup>
defineProps({
    name:{type:String,},//名字
    url:{type:String,},//头像图片地址
    size:{type:Number,default:()=>24},//头像大小
    isFirst:{type:Boolean,default:()=>false},//文字是否截取第一位
    // background:{type:String,default:()=>'#7bc0fc'}//头像背景颜色
    sex:{ type: Number, default: () => { return 1 } }//头像背景颜色
})
import pinyin from 'js-pinyin';

const computedPinYin = computed(() => (str) => {
	pinyin.setOptions({ checkPolyphone: false, charCase: 2 });
	return str ? pinyin.getCamelChars(str).slice(0, 1) : '-';
})

</script>
